<template>
	<view class="jx-task" v-if="item !== null">
		<view class="flex j-between a-center">
			<view class="flex a-center">
				<u-icon name="clock" size="32" color="#246FDD"></u-icon>
				<view class="time" v-if="item.status != 1 && item.status != 4">2021-09-21 23:02</view>
				<view class="time" v-else>剩余：12小时15分</view>
			</view>
			<view class="status">
				<view style="color: #2979FF;" v-if="item.status === 1">待审核</view>
				<view style="color: #00D86A;" v-if="item.status === 2">已完成</view>
				<view style="color: #DD2424;" v-if="item.status === 3">未通过</view>
				<view style="color: #2979FF;" v-if="item.status === 4">仲裁中</view>
			</view>
		</view>
		<view class="split">
			<u-line length="654" color="#f2f2f2"></u-line>
		</view>
		<view class="flex j-between a-center">
			<view class="flex a-center">
				<view class="t-pic">
					<image class="image" :src="item.src"></image>
				</view>
				<view class="ctt">
					<view class="flex j-between a-center">
						<view class="name ecllipse">{{item.name}}</view>
					</view>
					<view class="statics">
						<view class="flex j-between a-center">
							<view>提交：2021-12-21 12:00:11</view>
						</view>
					</view>
				</view>
			</view>
			<view class="submit flex j-center a-center" v-if="item.status == 1 || item.status == 4">
				<view>审核</view>
			</view>
			<view class="submit flex j-center a-center" v-else>
				<view>查看</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		item:{
			type:Object,
			default:null
		}
	}
}
</script>

<style lang="scss" scoped>
.jx-task{border-radius: 16rpx;background-color: #FFF;padding: 32rpx 24rpx;margin-bottom: 24rpx;color: #333;
	.time{margin-left: 24rpx;}
	.split{margin: 24rpx 0;}
	.t-pic{width: 88rpx;height: 88rpx;border-radius: 16rpx;overflow: hidden;margin-right: 24rpx;}
	.name,.c-name{font-size: 32rpx;color: #333;}
	.name{width:350rpx;}
	.coin{width: 36rpx;height: 36rpx;margin-right: 8rpx;}
	.t-name{width: 128rpx;height: 32rpx;border-radius: 20rpx;background-color: #f2f2f2;color: #999;font-size: 20rpx;
		margin-top: 16rpx;
	}
	.percent{color: #999;font-size: 24rpx;margin-top: 20rpx;}
	.statics{color:#999;font-size: 24rpx;margin-top: 20rpx;height: 34rpx;}
	.submits{margin-top: 24rpx;}
	.submit{width: 192rpx;height: 64rpx;border-radius: 16rpx;color: #FFF;font-size: 28rpx;background-color: #246FDD;}
}
</style>
